<template>
  <div class="tips-content">
    <div class="name">
      <img src="/images/tips/wangzhan.png" alt="">长春天奇汽车智能工艺装备工程有限公司
    </div>
    <div class="r">
      <div class="phone">
        <img src="/images/tips/phone.png" alt="">电话：0431-85907739
      </div>
      <a class="code" href="javascript:void(0)">
        <img src="/images/tips/weixin.png" alt=""> <span class="show">官方微信扫一扫</span>
       

        <div class="qr-code">
          <img src="/images/tips/code.jpg" alt="">
        </div>
      </a>
    </div>
  </div>
</template>

<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.tips-content {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: #333333;
  color: white;
  padding: 0 0%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;

  .r {
    display: flex;
    box-sizing: border-box;
    justify-content: space-around;
  }

  .name,
  .phone,
  .code {
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;

    img {
      height: 80%;
      margin-right: 10px;
    }
  }

  .phone {
    margin-right: 30px;
  }

  .code {
    position: relative;
    color: white;

    img {
      margin-top: 5px;
    }

    .qr-code {
      display: none;
      transition: 0.4s;
      position: absolute;
      width: 100%;
      top: 30px;
      box-sizing: border-box;
      border: 1px solid rgba(#d3e3fd, 1);

      img {
        width: 110px;
        height: 110px;
        margin: 0;
      }
    }

    &:hover {
      .qr-code {
        display: block;
        z-index: 999;
      }
    }
  }
}
</style>